<template>
  <div class="article-content" :style="{top:top , bottom:bottom}" @scroll="addArticle">
    <div class="content">
      <slot></slot>
      <div class="article-list" v-if="article.length">
        <ul>
          <li v-for="data in article">
            <!--缩略图-->
            <a href="" class="article-img">
              <img src="http://img01.sogoucdn.com/app/a/100540002/1182057.jpg?f=download">
            </a>
            <!--标题-->
            <h2 class="article-title">
              <a href="" v-text="data.title"></a>
            </h2>
            <!--文章信息-->
            <div class="article-info">
              <span>作者:{{data.author}}</span>
              <span>时间:{{data.releaseTime | getdate}}</span>
              <span>评论:{{data.comment.length}}</span>
            </div>
          </li>
        </ul>
      </div>
      <h4 class="prompt" v-show="!loading" v-text="msg"></h4>
      <loading  v-show="loading"></loading>
    </div>
  </div>
</template>
<script type="text/javascript">
  var loading = require("../../components/mobile/loading.vue");
  export default{
    data(){
      return {
        page:0,
        article:[],
        state:true,
        loading:true,
        data:{},
        msg:""
      }
    },
    props:{
      top:{type:String , default:"0"},
      bottom:{type:String , default:"0"},
      url:{type:String},
      keywords:{type:String}
    },
    components:{
      loading:loading
    },
    methods:{
      getArticle(){
        var th = this;
        th.loading = true;
        th.data.page = this.page;
        th.$http.post(th.url , th.data , function(res){
          if(res.state == "ok"){
            setTimeout(function(){
              th.article = th.article.concat(res.article);
              if(res.article.length < 10){
                th.msg = "(T_T)木有更多了呦!";
                th.state = false;
                th.loading = false;
              }else{
                th.page++;
                th.state = true;
              };
              !res.article.length && (th.msg = "(T_T)没有搜到您想要的文章!");
            },400);
          };
        },"JSON");
      },
      addArticle(e){
        if(this.state && this.getH < this.$el.scrollTop + this.$el.offsetHeight){
          this.state = false;
          this.getArticle();
        };
      }
    },
    ready(){
      switch (this.$route.path){
        case "/":
          this.data = {};
          this.getArticle();
          break;
        case "/search":
          this.$watch("keywords" , function(val){
            this.data.title = val;
            this.article = [];
            this.getArticle();
          });
          break;
      };
    },
    computed:{
      getH(){
        return this.$el.querySelector('.content').offsetHeight - 40;
      }
    },
    route:{
      data(transition){
        this.page = 0;
        this.article = [];
        this.data.column = transition.to.query.id;
        this.url = "/getArticle";
        this.getArticle();
      }
    }
  }
</script>
<style scoped>
  .article-content{
    width:100%;
    position:absolute;
    bottom:0.9rem;
    overflow-y:scroll;
  }
  .article-list{
    padding:0 0.2rem;
  }
  .article-list li{
    width:100%;
    padding:0.15rem 0;
    display:table;
    content:'';
    border-bottom:1px solid #f0f0f0;
  }
  /*缩略图*/
  .article-list .article-img{
    display:block;
    width:2.2rem;
    height:1.4rem;
    float:left;
    overflow:hidden;
    background:#ddd;
    border-radius:2px;
  }
  .article-list .article-img img{
    height:100%;
  }
  #msg{
    position:relative;
  }
  /*标题*/
  .article-list .article-title,
  .article-list .article-info{
    width:4.7rem;
    overflow:hidden;
    float:right;
  }
  .article-list .article-title{
    height:0.95rem;
    font-size:0.28rem;
    line-height:0.45rem;
  }
  .article-list .article-info{
    font-size:0;
  }
  .article-list .article-info span{
    display:inline-block;
    font-size:0.18rem;
    height:0.4rem;
    color:#999999;
    margin-right:0.2rem;
  }
  /*提示信息*/
  .prompt{
    text-align:center;
    font-size:0.28rem;
    color:#999999;
    padding:0.2rem 0;
  }
</style>
